Aunque el enlace tiene el atributo "a" establecido en la ruta correcta, no se carga al hacer clic. Otra ruta dentro de react-router se carga en su lugar.
Este es el código:
Aplicación.js
const [isLoggedIn, setIsLoggedIn] = React.useState(false); // useEffect to stop infinite looping problem with state React.useEffect(() => { const loggedInInfo = localStorage.getItem("isLoggedIn"); if (loggedInInfo === "1") { setIsLoggedIn(true); } }, []);Retorno interior()
<Switch> <Route path="/" exact> <Redirect to="/login" /> </Route> <Route path="/login"> {!isLoggedIn && <Login onFormSubmit={handleFormSubmit} />} </Route> <Route path="/home-page"> {isLoggedIn && <HomePage onLogout={handleLogout} />} {!isLoggedIn && <Redirect to="/login" />} </Route> <Route path="/approved-factory-assy-test"> {isLoggedIn && <ApprovedFactoryAssyTest onLogout={handleLogout} />} {!isLoggedIn && <Redirect to="/login" />} </Route> <Route path="*"> <h1>Page not found!</h1> </Route> </Switch>Navbar.js
<div className="sub-menu"> <ul> <li><Link className="link" to='/approved-factory-assy-test' target="_blank" rel="noreferrer noopener">Approved Factory Assy Test</Link></li> Sospecho que cuando la aplicación se abre en la nueva ventana y en el contexto del navegador, el estado inicial isLoggedIn que es falso para el renderizado inicial hace que el usuario abandone inmediatamente la ruta "/approved-factory-assy-test" . El problema es que el estado inicial coincide con el estado no autenticado, es decir, false .
const [isLoggedIn, setIsLoggedIn] = React.useState(false); // <-- initially false...
<Route path="/approved-factory-assy-test"> {isLoggedIn && <ApprovedFactoryAssyTest onLogout={handleLogout} />} {!isLoggedIn && <Redirect to="/login" />} // <-- bounce user to login </Route> Trate de usar un estado inicial más preciso. Inicialice el estado isLoggedIn desde localStorage y use un useEffect para conservar los cambios de estado local en localStorage.
Ejemplo:
const [isLoggedIn, setIsLoggedIn] = React.useState(() => { return JSON.parse(localStorage.getItem("isLoggedIn")) ?? false; }); React.useEffect(() => { localStorage.setItem("isLoggedIn", JSON.stringify(isLoggedIn)); }, [isLoggedIn]); Ahora representa el componente correcto en la representación inicial en función del valor de estado inicial de isLoggedIn .
<Route path="/approved-factory-assy-test"> {isLoggedIn ? <ApprovedFactoryAssyTest onLogout={handleLogout} /> : <Redirect to="/login" /> } </Route>